<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2024/12/17
  Time: 14:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="content-section">
    <h2><i class="fas fa-user-md"></i> 医生管理</h2>
    
    <div class="filter-section">
        <select id="deptSelect" class="dept-select" onchange="updateDoctorList()">
            <option value="">所有科室</option>
        </select>
    </div>
    
    <div class="action-bar">
        <button class="btn btn-primary" onclick="showAddDoctorModal()">
            <i class="fas fa-plus"></i> 添加医生
        </button>
    </div>
    
    <table class="data-table">
        <thead>
            <tr>
                <th>科室</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话号码</th>
                <th>身份证号</th>
            </tr>
        </thead>
        <tbody id="doctorTableBody">
        </tbody>
    </table>
    
    <div id="addDoctorModal" class="modal" style="display: none;">
        <div class="modal-content">
            <h3>添加新医生</h3>
            <form id="addDoctorForm">
                <div class="form-group">
                    <label for="doctorId">医生ID</label>
                    <input type="text" id="doctorId" name="doctorId" required>
                </div>
                
                <div class="form-group">
                    <label for="doctorName">姓名</label>
                    <input type="text" id="doctorName" name="doctorName" required>
                </div>
                
                <div class="form-group">
                    <label>性别</label>
                    <div class="radio-group">
                        <label>
                            <input type="radio" name="doctorGender" value="男" checked> 男
                        </label>
                        <label>
                            <input type="radio" name="doctorGender" value="女"> 女
                        </label>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="doctorAge">年龄</label>
                    <input type="number" id="doctorAge" name="doctorAge" min="0" required>
                </div>
                
                <div class="form-group">
                    <label for="doctorIdCard">身份证号</label>
                    <input type="text" id="doctorIdCard" name="doctorIdCard" required>
                </div>
                
                <div class="form-group">
                    <label for="doctorPhone">电话号码</label>
                    <input type="tel" id="doctorPhone" name="doctorPhone" required>
                </div>
                
                <div class="form-group">
                    <label for="deptId">所属科室</label>
                    <select id="deptIdSelect" name="deptId"  id="deptId" required>
                        <option value="">请选择科室</option>
                    </select>
                </div>
                
                <div class="form-buttons">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-secondary" onclick="hideAddDoctorModal()">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 页面加载完成后初始化数据
    initializeDoctorManage();
    $('#addDoctorForm').submit(function(e) {
        e.preventDefault();
        addDoctorForm();
    });
});

function initializeDoctorManage() {
    loadDepartments();
    loadDoctors();
}

// 加载科室列表
function loadDepartments() {
    $.get('/0201/admin/departments', function(departments) {
        var select = $('#deptSelect');
        select.find('option:not(:first)').remove(); // 清除旧的选项
        departments.forEach(function(dept) {
            select.append($('<option>', {
                value: dept.deptId,
                text: dept.deptName
            }));
        });
    });
}

// 更新医生列表
function updateDoctorList() {
    var deptId = $('#deptSelect').val();
    loadDoctors(deptId);
}

// 加载医生信息
function loadDoctors(deptId) {
    var url = '/0201/admin/doctors';
    if (deptId) {
        url += '?deptId=' + deptId;
    }
    
    $.get(url, function(doctors) {
        var tbody = $('#doctorTableBody');
        tbody.empty();
        
        doctors.forEach(function(doctor) {
            var row = $('<tr>');
            row.append($('<td>').text(doctor.deptName));
            row.append($('<td>').text(doctor.doctorName));
            row.append($('<td>').text(doctor.doctorAge));
            row.append($('<td>').text(doctor.doctorGender));
            row.append($('<td>').text(doctor.doctorPhone));
            row.append($('<td>').text(doctor.doctorIdCard));
            tbody.append(row);
        });
    });
}

function showAddDoctorModal() {
    $('#addDoctorModal').show();
    // 加载科室列表到选择框
    loadDepartmentsForSelect();
}

function hideAddDoctorModal() {
    $('#addDoctorModal').hide();
    $('#addDoctorForm')[0].reset();
}

function loadDepartmentsForSelect() {
    $.get('/0201/admin/departments', function(departments) {
        var select = $('#deptIdSelect');
        select.find('option:not(:first)').remove();
        departments.forEach(function(dept) {
            select.append($('<option>', {
                value: dept.deptId,
                text: dept.deptName
            }));
        });
    });
}

// 处理表单提交
function addDoctorForm() {
    // 获取表单数据
    var doctorId = $('#doctorId').val();
    var doctorName = $('#doctorName').val();
    var doctorGender = $('input[name="doctorGender"]:checked').val();
    var doctorAge = $('#doctorAge').val();
    var doctorIdCard = $('#doctorIdCard').val();
    var doctorPhone = $('#doctorPhone').val();
    var deptId = $('#deptIdSelect').val();
    
    // 验证医生ID格式（假设要求为字母开头的字母数字组合）
    if (!/^[A-Za-z][A-Za-z0-9]*$/.test(doctorId)) {
        alert('医生ID必须以字母开头，且只能包含字母和数字');
        return;
    }
    
    // 验证必填字段
    if (!doctorId || !doctorName || !doctorGender || !doctorAge || 
        !doctorIdCard || !doctorPhone || !deptId) {
        alert('请填写所有必填字段');
        return;
    }
    
    // 验证身份证号
    if (!validateIdCard(doctorIdCard)) {
        alert('请输入正确的身份证号');
        return;
    }
    
    // 验证电话号码
    if (!validatePhone(doctorPhone)) {
        alert('请输入正确的电话号码');
        return;
    }
    // 提交表单
    $.ajax({
        url: '/0201/admin/addDoctor',
        type: 'POST',
        data: {
            'doctorId': doctorId,
            'doctorName': doctorName,
            'doctorGender': doctorGender,
            'doctorAge': doctorAge,
            'doctorIdCard': doctorIdCard,
            'doctorPhone': doctorPhone,
            'deptId': deptId
        },
        dataType: 'json',  // 指定返回数据类型
        success: function(response) {
            console.log('Success:', response);  // 添加日志
            if (response.message) {
                alert(response.message);
                hideAddDoctorModal();
                loadDoctors(); // 刷新医生列表
            }
        },
        error: function(xhr, status, error) {
            console.log('Error:', xhr.responseText);  // 添加日志
            var errorMsg = '添加失败';
            try {
                var response = JSON.parse(xhr.responseText);
                if (response.error) {
                    errorMsg = response.error;
                }
            } catch(e) {
                console.log('Parse error:', e);
            }
            alert(errorMsg);
        }
    });
};

// 验证函数
function validateIdCard(idCard) {
    return /^\d{17}[\dX]$/.test(idCard);
}

function validatePhone(phone) {
    return /^1[3-9]\d{9}$/.test(phone);
}
</script>

<style>
.filter-section {
    margin-bottom: 20px;
}

.dept-select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 200px;
    font-size: 14px;
}

.dept-select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.action-bar {
    margin-bottom: 20px;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 500px;
    max-width: 90%;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.radio-group {
    display: flex;
    gap: 20px;
}

.form-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
</style>
